<template>
  <div class="cellGood">
    <div class="line" :class="[partition ? 'mt' : '']">
      <div class="label">
        <em class="req" v-if="required">*</em>
        {{ label }}
      </div>
      <div class="inp" v-if="contenType == 'inp'">
        <input type="text" :value="inpval" @input="$emit('update:inpval', $event.target.value)" :placeholder="placeholderTxt" />
      </div>
      <div class="link" @click="clickLink" v-if="contenType == 'link'">
        <span class="link_txt" :class="[blackC_is ? 'blackC' : '']">{{ linkConten }}</span>
        <van-icon name="arrow" color="#AAAAB3" />
      </div>
      <div class="uploadBox" v-if="contenType == 'uploadimg'">
        <div class="uploadT">
          <div class="pos">
            <van-uploader :after-read="onRead"></van-uploader>
          </div>
          <van-icon name="plus" color="#AAAAB3" size="25px" v-if="!linkConten" />
          <img :src="linkConten" alt="" v-else />
        </div>
      </div>
      <div class="uploadBox more" v-if="contenType == 'uploadimgMore'">
        <div class="uploadT mr" v-for="(item, index) in linkConten" :key="index">
          <img :src="item" alt="" />
          <div class="close" @click="del(index)">
            <van-icon name="cross" />
          </div>
        </div>
        <div class="uploadT">
          <div class="pos">
            <van-uploader :after-read="onRead"></van-uploader>
          </div>
          <van-icon name="plus" color="#AAAAB3" size="25px" />
        </div>
      </div>
      <div class="selectBox" v-if="contenType == 'switch'">
        <van-switch v-model="checkedPost" size="20px" @change="switchTap" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    required: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: ""
    },
    contenType: {
      type: String,
      default: "inp"
    },
    linkConten: {
      type: null,
      default: ""
    },
    partition: {
      type: Boolean,
      default: false
    },
    placeholderTxt: {
      type: String,
      default: "请输入"
    },
    checkedPost: {
      type: Boolean,
      default: false
    },
    inpval: {
      type: null
    },
    blackC_is: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      checked: false
    };
  },
  methods: {
    clickLink() {
      this.$emit("tapLink");
    },
    switchTap(val) {
      this.$emit("switchTap", this.checkedPost);
    },
    del(index) {
      this.$emit("del", index);
    },
    onRead(e) {
      let fd = new FormData();
      fd.append("file", e.file); // 第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
      this.uploadUrl = this.fun.getRealUrl("upload.uploadPic", {});
      axios
        .post(this.uploadUrl, fd, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(response => {
          var responseData = response.data;
          if (responseData.result == 1) {
            // this.form.thumb = responseData.data.img_url;
            this.$emit("uploadImg", responseData.data.img_url);
          } else {
            this.$toast(responseData.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.mt {
  margin-top: 0.66rem;
}
.line {
  position: relative;
  padding: 1.16rem 0.75rem;
  box-sizing: border-box;
  background: #fff;
  display: flex;
  justify-content: space-between;
  border-radius: 0.5rem;
  .label {
    flex-shrink: 0;
    font-weight: 500;
    font-size: 0.88rem;
    display: flex;
    width: 5rem;
    margin-right: 0.5rem;
    text-align: left;
    .req {
      color: #f15353;
    }
  }
  .inp {
    flex: 1;
    input {
      width: 100%;
      border: none;
    }
    input::placeholder {
      color: #aaaab3;
    }
  }
  .selectBox {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .link {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .link_txt {
      flex: 1;
      text-align: left;
      color: #aaaab3;
    }
    .blackC {
      color: #000;
    }
  }
  .more {
    display: flex;
    flex-wrap: wrap;
  }
  .uploadBox {
    flex: 1;
    .mr {
      margin-right: 0.5rem;
      margin-bottom: 0.3rem;
      position: relative;
      .close {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 99;
      }
    }
    .mr:nth-child(3n) {
      margin-right: 0;
    }
    .uploadT {
      width: 4.63rem;
      height: 4.63rem;
      background: #f8f8f8;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.31rem;
      }
      .pos {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    }
  }
}
.line::after {
  position: absolute;
  content: "";
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0;
  border-bottom: 1px solid #f0f0f1;
}
.line:last-child::after {
  position: absolute;
  content: "";
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0;
  border-bottom: none;
}
</style>
